<template>
  <div class="app-frame" :style="bodyStyle">
    <div v-if="!signInFlag" class="app-item">
      <div v-html="appInfo.titleHtml" />
      <SignIn
        :class="[appInfo.titleHtml ? 'app-login' : 'app-login-notitle']"
        @signIn="signInClick"
      />
    </div>
    <Navigation
      v-else-if="homeFlag"
      class="app-content app-nav"
      :data="module"
      @click="selectModule"
    />
    <mobile v-else-if="signInMode === MODE.MOBILE" class="app-content" />
    <Cockpit v-else-if="signInMode === MODE.COCKPIT" class="app-content" />
    <windows v-else-if="signInMode === MODE.WINDOWS" class="app-content" />
    <web v-else />
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "App",
  components: {
    SignIn: () => import("@view/app/SignIn.vue"),
    Navigation: () => import("@components/CardVerticalList.vue"),
    Windows: () => import("@components/HelloWorld.vue"),
    Mobile: () => import("@components/HelloWorld.vue"),
    Cockpit: () => import("@view/cockpit/Cockpit.vue"),
    Web: () => import("@view/web/Web.vue"),
  },
  data() {
    return {
      bodyMinHight: 0,
    };
  },
  computed: {
    ...mapState({
      MODE: (state) => state.constant.MODE,
      signInFlag: (state) => state.authentication.flag,
      signInMode: (state) => state.authentication.mode,
      homeFlag: (state) => state.authentication.homeFlag,
      module: (state) => state.userProfile.module,
    }),
    ...mapGetters(["systemInfo"]),
    appInfo() {
      return {
        titleHtml: this.systemInfo
          ? this.systemInfo.info
            ? this.systemInfo.info.titleHtml
            : null
          : null,
      };
    },
    bodyStyle() {
      // const imgUrl = this.signInFlag ? 'background_home.jpg' : 'background_body.png'
      return {
        alignItems: this.signInFlag && !this.homeFlag ? "stretch" : "center",
        height: this.bodyMinHight + "px",
        // ,
        // backgroundImage: `url(${require(`@assets/${imgUrl}`)})`
      };
    },
  },
  mounted() {
    window.onresize = () => {
      // resize body style
      this.bodyMinHight = window.innerHeight;
    };
  },
  async created() {
    this.init();
    this.appInit();
    this.localSocket();
    // this.handdleVoice();
  },
  methods: {
    ...mapActions({
      signIn: "signIn",
      appInit: "init",
      getSystemInfo: "getSystemInfo",
      getMenu: "userProfile/getMenu",
    }),
    async init() {
      // init body style
      this.bodyMinHight = Math.max(this.bodyMinHight, window.innerHeight);
      await this.getSystemInfo([{ item_id: location.hostname }]);
    },
    signInClick(data) {
      this.signIn({ ...data, mode: this.signInMode, homeFlag: true });
    },
    selectModule(data, event) {
      this.signIn({
        mode: data && data.info ? data.info.mode : null,
        homeFlag: !(
          data &&
          data.info &&
          data.info.mode &&
          data.info.mode.trim()
        ),
      });
      this.getMenu({ data });
    },
    localSocket() {
      let that = this;
      // if ("WebSocket" in window) {
      //   // console.log("您的浏览器支持 WebSocket!");

      //   // that.ws = new WebSocket(`ws://192.168.65.65:6690/speech`); //配置ip
      //   that.ws = new WebSocket(`ws://localhost:6690/speech`);
      //   that.$global.setWs(that.ws);
      //   // console.log(that.ws, "989");
      //   // that.ws.onopen = that.onopen();
      //   that.onopen = that.ws.onopen;
      //   that.ws.onclose = function () {
      //     // 关闭 websocket
      //     console.log("连接已关闭...");
      //     setTimeout(() => {
      //       that.localSocket();
      //     }, 2000);
      //   };
      // } else {
      //   // 浏览器不支持 WebSocket
      //   console.log("您的浏览器不支持 WebSocket!");
      // }
    },
    //    handdleVoice() {
    //       alert('123')
    //   console.log(this.$annyang, "989");
    //   // this.$annyang.init()
    //   if(this.$annyang){
    //     var commands = {
    //     '456':function() {
    //     alert('123')
    //     }
    //   };

    //   // Add our commands to annyang
    //   this.$annyang.setLanguage('zh-CN');
    //   this.$annyang.addCommands(commands);

    //   // Start listening.
    //   this.$annyang.start();
    //   // this.$annyang.start({ autoRestart: true, continuous: false });
    //   }

    // },
  },
};
</script>
<style>
* {
  box-sizing: border-box;
}
/* 1rem=12px */
html {
  font-size: 62.5%;
}
body {
  /* overflow: hidden; */
  margin: 0;
}
</style>
<style scoped>
.app-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  user-select: none;
}
.app-item {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  background-image: url("~@assets/background_app.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  color: #6fffe9;
  font-size: 2rem;
}
.app-content {
  flex-grow: 1;
  color: #fff;
  font-size: 3rem;
}
.app-login {
  margin-bottom: 5rem;
}
.app-login-notitle {
  margin: 5rem 0;
}
.app-nav {
  height: 20rem;
  margin: 0 10% 10% 10%;
}
</style>
